import { PLAN_BUSINESS, getPlan } from '@automattic/calypso-products';
import { ExternalLink } from '@wordpress/components';
import { useTranslate, TranslateResult } from 'i18n-calypso';
import { type FC, useMemo } from 'react';
import { useSelector } from 'calypso/state';
import { getThemeSoftwareSet } from 'calypso/state/themes/selectors';

interface BundleSettings {
	/** Name field is a label for the bundle name, which can be used isolated or in the middle of a sentence. Many times used as "{name} theme". */
	name: string;
	/** Software name field is a label for the product name, which can be used isolated or in the middle of a sentence, like: "Installing {softwareName}" */
	softwareName: string;
	iconComponent: FC;
	color: string;
	designPickerBadgeTooltip: string;
	bannerUpsellDescription: string;
	bundledPluginMessage: TranslateResult;
}

export type BundleSettingsHookReturn = BundleSettings | null;

const WooOnPlansIcon = () => (
	<svg viewBox="0 0 60 24" xmlns="http://www.w3.org/2000/svg" width="30px">
		<path
			d="M7.54838 19.653C9.27555 19.653 10.6616 18.8 11.7064 16.8383L14.0306 12.4884V16.1773C14.0306 18.3523 15.4379 19.653 17.6129 19.653C19.3187 19.653 20.5768 18.9067 21.7922 16.8383L27.1443 7.79732C28.3171 5.81427 27.4855 4.32166 24.9054 4.32166C23.5194 4.32166 22.6238 4.76944 21.8135 6.28338L18.1246 13.2134V7.05101C18.1246 5.21723 17.2504 4.32166 15.6298 4.32166C14.3505 4.32166 13.3269 4.87606 12.538 6.41132L9.06232 13.2134V7.11498C9.06232 5.15326 8.25204 4.32166 6.29032 4.32166H2.28157C0.767632 4.32166 0 5.02532 0 6.32603C0 7.62674 0.810278 8.37305 2.28157 8.37305H3.92345V16.156C3.92345 18.3523 5.39475 19.653 7.54838 19.653Z"
			fill="#ffffff"
		/>
		<path
			d="M34.9709 4.32166C30.5997 4.32166 27.252 7.58409 27.252 11.998C27.252 16.4119 30.621 19.653 34.9709 19.653C39.3208 19.653 42.6472 16.3905 42.6686 11.998C42.6686 7.58409 39.3208 4.32166 34.9709 4.32166ZM34.9709 14.9406C33.329 14.9406 32.1989 13.7038 32.1989 11.998C32.1989 10.2921 33.329 9.03406 34.9709 9.03406C36.6128 9.03406 37.7429 10.2921 37.7429 11.998C37.7429 13.7038 36.6341 14.9406 34.9709 14.9406Z"
			fill="#ffffff"
		/>
		<path
			d="M51.4525 4.32166C47.1026 4.32166 43.7549 7.58409 43.7549 11.998C43.7549 16.4119 47.1026 19.653 51.4525 19.653C55.8024 19.653 59.1502 16.3905 59.1502 11.998C59.1502 7.60541 55.8024 4.32166 51.4525 4.32166ZM51.4525 14.9406C49.7893 14.9406 48.7018 13.7038 48.7018 11.998C48.7018 10.2921 49.8106 9.03406 51.4525 9.03406C53.0944 9.03406 54.2245 10.2921 54.2245 11.998C54.2245 13.7038 53.0944 14.9406 51.4525 14.9406Z"
			fill="#ffffff"
		/>
	</svg>
);

const SenseiIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
		<path
			fill="currentColor"
			d="M9.835 15.38c.3-.23.179-.474.6-.563-.02.194.146.391.251.563-.109-.367-.002-.536.08-.72.347-.785-.662-1.293-1.35-1.418.235-.164.399-.327.694-.355a2.377 2.377 0 0 0-1.058.23c-1.112.531-1.993-.523-1.41-1.48.31-.51.664-.519.982-.865.077.178.103.372.075.564a.919.919 0 0 0 .049-.664c-.104-.336-.4-.338-.456-.821-.012-.101-.105.056-.263-.077-.038-.032-.113-.09-.163-.064-.085.044-.18.008-.232.034-.083.041-.109-.045-.2.016-.16.107-.178-.013-.332.005-.193.023-.32.261-.43.144-.102-.108-.206.075-.28.075-.05 0-.311.317-.426.028-.086-.216-.28.206-.382.063-.033-.046-.123.108-.18-.044-.014-.035 0-.078-.108-.027-.215.099-.138-.06-.207-.144-.083-.103-.113-.103-.068-.27.036-.133-.019-.33.2-.364.055-.008.107-.005.184-.148.096-.18.231-.093.207-.175-.036-.119.143-.28.226-.355.11-.103.254-.252.306-.396a.63.63 0 0 1 .102-.141c.081-.084.105-.003.227-.045.088-.03.02.053.106-.07.028-.038.105-.001.19-.039.259-.112.283-.11.347-.371.012-.05.025-.088.08-.083.109.01.134-.052.2-.05.061.001.083-.03.115-.068.18-.216.277-.055.357-.072.06-.012.022-.142.184-.102.23.057.155-.05.303-.015.174.041.186.19.306.225.143.042.211.198.307.196.337-.005.235.23.448.323-.16-.161.012-.421-.352-.455-.08-.007-.11-.127-.23-.183-.146-.067-.13-.21-.394-.27.068-.04.089.005.13-.073.058-.11.09-.046.113-.113.02-.063.006-.099.165-.155.165-.06.325-.195.472-.188.13.006.185-.08.177-.19-.008-.112-.033-.267.222-.22.153.029.15.003.15-.1-.002-.102.04-.165.174-.16.098.002.194-.003.231-.117.03-.091.207-.114.302-.148.317-.114.361.05.447-.095.07-.117.196-.317.337-.175.028.029.054.05.15-.056.08-.088.27-.2.337-.048.027.06.086.121.138.044a.08.08 0 0 1 .053-.039c.05-.01.079-.024.104-.036.218-.101.314-.095.213.125-.142.316.792-.192.532.151-.095.126.538.197.63.254.05.032.048.059.144.077.271.05.267.026.284.243.007.098.107.043.107.168 0 .535.472.266.549.399.012.022.032.042.079.042.149 0 .157-.03.224.089.027.047.05.072.127.096.12.037.112.05.068.138-.054.104.03.102.138.112.1.01.148.062.216.138.11.122.284.156.43.227.084.04.002.14.143.243.104.077.156.066.016.165-.59.418.22.305.446.694.051.087.118.195.216.295.225.23.1.293.221.437.07.083.015.063.13.137.272.175-.105.292-.319.212-.097-.035-.166-.085-.147-.025.016.049-.01.083-.052.12-.125.112.123.068.181.06.181-.025.664-.076.66.093-.005.22.136.27.25.284.185.024.238.057.34.226.092.152.145.07.288.205.097.093.217.258.02.282-.047.005-.099 0-.12.017a.411.411 0 0 1-.14.066c-.295.09.14.136.246.113.093-.02.209-.05.3-.027.057.015.062.08.244.107.06.01.036.099.006.16-.104.214.191.1.16.263-.017.093.11.245-.067.248-.057.001-.117-.015-.115.034.004.105-.165-.03-.317.115-.056.054-.19.092-.272-.009-.032-.038-.07-.069-.218-.023-.144.046-.242.204-.306-.04-.017-.064-.05-.065-.142-.097-.125-.043-.114-.258-.297-.12a.24.24 0 0 1-.214.039c-.144-.037-.303.012-.317-.096-.021-.179-.191-.305-.377-.296-.147.008-.278.034-.355-.137.057.195.207.208.382.208.144 0 .23.075.255.225.045.265.204.099.406.223.1.06.17.159.21.273.042.118.37-.024.282.258-.037.122-.107.168-.242.266-.4.294-.5.004-.618.239-.062.121-.063.031-.196.09-.22.098-.36-.128-.522-.045-.182.094-.168-.08-.352.037-.152.097-.308-.074-.38.192-.063.227-.322.232-.44.11-.189-.194-.132.229-.362.054-.123-.091-.213.043-.392.045-.33.005-.489-.282-.65-.107-.192.206-.331-.032-.334-.242-.003-.216-.777-.144-1.185-.256-.225-.062-.932.013-.702-.35-.372.39.456.366.682.455.136.053.245.095.377.114.13.296.214.617.227 1.007.043-.214.053-.433.028-.649-.043-.383.242.19.276.272.184.45-.022 1.278-.488 1.526a2.957 2.957 0 0 0-.562-.99c.256.392.616 1.192.327 1.65a1.023 1.023 0 0 1-.55-.483c.077.333.413.702.818.58.707-.213.704.233 1.641.307.682.111 1.654 0 2.118.037.254.02 1.32.197 1.315.465-.02 1.105-.438 1.164-1.539 1.268-.64.06-1.134.085-1.823.11-1.54.058-3.391.06-4.868 0-.724-.03-1.072-.036-1.841-.137-.769-.1-1.19-.363-1.178-1.187.005-.304.905-.594 1.2-.628.347-.039.901.005 1.405-.116.527-.127.747-.21 1.135-.508Zm5.347-6.052c-.167-.042-.051-.138-.339-.014-.17.073-.194-.13-.365-.094-.172.036-.242-.125-.499-.166-.318-.05-.088-.133-.592-.032-.097.02-.179-.09-.481-.052-.355.046-.23.084-.445-.115-.272-.251-.488-.082-.767-.184.216.166.368.019.622.221-.242.138-.523.802-.962.844.478.107.709.354 1.148.413.504.068.882.118 1.151.531.301.463.44.196.874.168.275-.017.282-.185.328-.362.063-.245.126-.256.31-.289.213-.037.163-.092.107-.156-.15-.172.019-.207.146-.244.222-.064.042-.075.042-.166-.278-.09-.063-.217.092-.273.169.105.242.087.317.073.109-.021.181.03.273-.028-.135.014-.163-.037-.278-.02-.051.007-.112.01-.219-.054-.18-.107-.27.048-.463 0Zm-2.28 1.64-1.09-.545c-1.316-.657-1.915.313-2.337 1.376l-.766.73c.549-.338.996-.714 1.574-.71.092 0 1.516.484 1.286-.092-.04-.104.09-.052.125-.201.04-.17.055-.141.195-.033.089.069.211.113.174-.048-.017-.072-.04-.137.28-.004.15.062.095-.064.303-.09.29-.034.228-.31.364-.349.076-.022.152.058.295-.077.05-.046.11-.089.232-.057-.143-.073-.22-.014-.292.03-.146.089-.204-.037-.343.07Zm-2.23-1.923c.16-.02.32-.036.482-.046a.13.13 0 0 0 .074-.06.111.111 0 0 0 .007-.09.268.268 0 0 1 .147-.206l-.002-.003c-.258.001-.466.1-.73.211-.052.022-.024.111-.118.213a.26.26 0 0 1-.201.235.136.136 0 0 0-.09.046.113.113 0 0 0-.026.092.252.252 0 0 1-.277.061c-.2-.077-.35-.065-.448.036a.39.39 0 0 1 .398.014c.134.066.3.031.39-.082a.132.132 0 0 1 .126-.098.421.421 0 0 0 .268-.323Z"
		/>
	</svg>
);

export function useBundleSettings( themeSoftware?: string ): BundleSettingsHookReturn {
	const translate = useTranslate();
	const businessPlanName = getPlan( PLAN_BUSINESS )?.getTitle() || '';

	const bundleSettings = useMemo( () => {
		switch ( themeSoftware ) {
			case 'woo-on-plans':
				return {
					name: 'WooCommerce',
					softwareName: 'WooCommerce',
					iconComponent: WooOnPlansIcon,
					color: '#873EFF',
					designPickerBadgeTooltip: translate(
						'This theme comes bundled with WooCommerce, the best way to sell online.'
					),
					bannerUpsellDescription: translate(
						'This theme comes bundled with the WooCommerce plugin. Upgrade to a %(businessPlanName)s plan to select this theme and unlock all its features.',
						{ args: { businessPlanName } }
					) as string,
					bundledPluginMessage: translate(
						'This theme comes bundled with the {{link}}WooCommerce{{/link}} plugin.',
						{
							components: {
								link: <ExternalLink children={ null } href="https://woocommerce.com/" />,
							},
						}
					),
				};

			case 'sensei':
				return {
					name: 'Sensei LMS',
					softwareName: 'Sensei LMS',
					iconComponent: SenseiIcon,
					color: '#43AF99',
					designPickerBadgeTooltip: translate(
						'This theme comes bundled with Sensei. Create and sell courses that your students will love.'
					),
					bannerUpsellDescription: translate(
						'This theme comes bundled with the Sensei plugin. Upgrade to a %(businessPlanName)s plan to select this theme and unlock all its features.',
						{ args: { businessPlanName } }
					) as string,
					bundledPluginMessage: translate(
						'This theme comes bundled with the {{link}}Sensei{{/link}} plugin.',
						{
							components: {
								link: <ExternalLink children={ null } href="https://senseilms.com/" />,
							},
						}
					),
				};

			default:
				return null;
		}
	}, [ themeSoftware, translate, businessPlanName ] );

	return bundleSettings;
}

/**
 * Hook to get the bundle settings for a given theme.
 * If the theme doesn't have a sotfware set defined, it returns `null`.
 */
export function useBundleSettingsByTheme( themeId: string ): BundleSettingsHookReturn {
	const themeSoftwareSet = useSelector( ( state ) => getThemeSoftwareSet( state, themeId ) );
	// Currently, it always get the first software set. In the future, the whole applications can be enhanced to support multiple ones.
	const themeSoftware = themeSoftwareSet[ 0 ];
	const bundleSettings = useBundleSettings( themeSoftware );

	return bundleSettings;
}
